<template>
 <div style="margin:20px auto;width: 80%">

    <h1>{{data.account}}</h1>
    <tiny-time-line :data="data?.logs" :active="active" @click="click" vertical>
    <template #left="{ slotScope: { code } }">
      <span class="custom-left">
        {{ code }}
      </span>
    </template>
    <template #right="{ slotScope: { time } }">
      <span class="custom-right">
        {{ time }}
      </span>
    </template>
  </tiny-time-line>
 </div>
</template>

<script setup>
import { ref ,onMounted,inject} from 'vue'
import { TimeLine as TinyTimeLine } from '@opentiny/vue'
import {useRoute} from 'vue-router'
const axios = inject('axios')
const active = ref(1)
const data = ref({})
const route = useRoute()
const account = ref(route.params.account)
onMounted(() => {
      axios.get('/logs/logs?account='+account.value).then(res => {
       data.value=res.data.data
      }).catch(err => {
      })
    }
)
function click(index) {
  active.value = index
}
</script>

<style scoped>
.custom-left {
  width: 100px;
  padding-right: 16px;
  text-align: right;
}

.custom-right {
  margin-left: 15px;
  margin-bottom: 50px;
}
</style>